<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>parcel</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    .dark {
      background: rgba(0, 0, 0, 0.9);
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <!-- hooks原理 -->
  <!-- <script src="./index.js"></script> -->

  <!-- redux 中间件原理 -->
  <!-- <script src="./middleware.js"></script> -->

  <!-- hooks and custom hooks 测试 -->
  <!-- <script src="./hooks.js"></script> -->

  <!-- react setState执行机制测试 -->
  <!-- <script src="./test.js"></script> -->

  <!-- react合成事件和js原声事件 -->
  <!-- <script src="./event.js"></script> -->

  <!-- react拖拽 改变元素位置 -->
  <!-- <script src="./drag.js"></script> -->

  <!-- react-resizable 拖拽 改变元素大小以及位置 -->
  <!-- <script src="./drag2.js"></script> -->

  <!-- react-draggable 拖拽元素 改变左右元素宽度 -->
  <!-- <script src="./drag3.js"></script> -->

  <!-- react-split 拖拽元素 改变左右元素宽度 -->
  <!-- <script src="./drag4.js"></script> -->

  <!-- arco-design 拖拽元素 改变左右元素宽度 -->
  <script src="./drag5.js"></script>

  <!-- react-dnd 实现列表拖拽排序 -->
  <!-- <script src="./DragSortList/index.tsx"></script> -->

  <!-- redux demo -->
  <!-- <script src="./reduxDemo.js"></script> -->

  <!-- 手写简单版本redux 含有夜间模式切换demo -->
  <!-- <script src="./reduxDemo2.js"></script> -->

  <!-- react hooks 实现简版本rudux -->
  <!-- <script src="./hooks-redux/index.js"></script> -->

  <!-- 简单单页应用demo -->
  <!-- <script src="./spa.js"></script> -->

  <!-- recoil demo -->
  <!-- <script src="./recoil.js"></script> -->

  <!-- recoil demo 含有文件夹目录 -->
  <!-- <script src="./recoil1.js"></script> -->

  <!-- 手动实现简单recoil demo -->
  <!-- <script src="./recoils/app.tsx"></script> -->

  <!-- callapp-lib插件 唤起app demo -->
  <!-- <script src="./callApp.js"></script> -->

  <!-- 无限滚动demo -->
  <!-- <script src="./infiniteScroll.js"></script> -->

  <!-- 虚拟列表demo -->
  <!-- <script src="./virtualList.js"></script> -->

  <!-- react-window 固定高度虚拟列表 -->
  <!-- <script src="./react-window/fixed-size-list.js"></script> -->

  <!-- react-window 不定高度虚拟列表 -->
  <!-- <script src="./react-window/variable-size-list.js"></script> -->

  <!-- react-window 动态高度虚拟列表 -->
  <!-- <script src="./react-window/dynamic-size-list.js"></script> -->

  <!-- react-virtuoso 插件 动态高度虚拟列表 -->
  <!-- <script src="./react-window/virtuoso.js"></script> -->

  <!-- 全局动态弹窗 (dialog) demo -->
  <!-- <script src="./dialog.js"></script> -->

  <!-- fiber理解 -->
  <!-- <script src="./fiber.js"></script> -->

  <!-- useEffect清除副作用理解 -->
  <!-- <script src="./useEffect.js"></script> -->

  <!-- setState理解 demo -->
  <!-- <script src="./setState.js"></script> -->

  <!-- useContext理解 demo -->
  <!-- <script src="./useContext.js"></script> -->

  <!-- 手动实现useState demo -->
  <!-- <script src="./hooks1/useState.js"></script> -->

  <!-- 手动实现useMemo和useCallback demo -->
  <!-- <script src="./hooks1/useMemo&useCallback.js"></script> -->

  <!-- 手动实现useEffect demo -->
  <!-- <script src="./hooks1/useEffect.js"></script> -->

  <!-- 手动实现useLayoutEffect demo -->
  <!-- <script src="./hooks1/useLayoutEffect.js"></script> -->

  <!-- 手动实现useRef demo -->
  <!-- <script src="./hooks1/useRef.js"></script> -->

  <!-- 手动实现useReducer demo -->
  <!-- <script src="./hooks1/useReducer.js"></script> -->

  <!-- 手动实现useContext demo -->
  <!-- <script src="./hooks1/useContext.js"></script> -->

  <!-- 手动实现useImperativeHandle demo -->
  <!-- <script src="./hooks1/useImperativeHandle.js"></script> -->

  <!-- react-activation 实现 KeepAlive demo -->
  <!-- <script src="./reactKeepAlive1.js"></script> -->

  <!--  自定义hooks 获取dom元素信息 demo -->
  <!-- <script src="./clientRect.js"></script> -->
</body>

</html>